<template>
  <div style="margin-bottom: 20px;">
    <el-dialog :title="edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag"
               @open="handleOpenConfig" :before-close="handleClose" width="950px">
      <el-row type="flex" justify="space-between" style="margin: 0 0 10px 6px;">
        <el-row type="flex" justify="space-around">
          <el-button size="medium" :type="plainVal === ''? 'primary' : ''" @click="queryTypeClick('')">全部</el-button>
          <el-button size="medium" :type="plainVal === '10'? 'primary' : ''" @click="queryTypeClick('10')">运行</el-button>
          <el-button size="medium" :type="plainVal === '20'? 'primary' : ''" @click="queryTypeClick('20')">风险</el-button>
          <el-button size="medium" :type="plainVal === '30'? 'primary' : ''" @click="queryTypeClick('30')">故障</el-button>
        </el-row>
        <!--<el-button type="primary" @click="exportExcel" :loading="downloadLoading">导出</el-button>-->
      </el-row>
      <!--table0-->
      <div style="width: 100%;position: relative;">
        <el-table
          :data="tableData"
          ref="mainTable"
          header-row-class-name="table-header-center"
          border element-loading-text="正在加载中..."
          style="margin: 0 4px;">
          <!--<el-table-column type="selection" width="40"></el-table-column>-->
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableHead'
                           :label="value.title">
            <template slot-scope="scope">
              <div v-if="value.key === 'gmtCreate'">{{scope.row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
              <div v-else-if="value.key === 'state'">{{scope.row.state | vehicleTypeFilter}}</div>
              <div v-else-if="value.key === 'vehicleSpeed'">{{(parseInt((scope.row.vehicleSpeed?scope.row.vehicleSpeed:0) * 100)/100).toFixed(2)}}</div>
              <div v-else>{{scope.row[value.key]}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="toTypeDetail('车辆详情', scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--btn-->
      <!--<el-row type="flex" justify="end" style="margin-top: 20px;">-->
        <!--<el-button type="primary" @click="handleClose">关闭</el-button>-->
      <!--</el-row>-->
      <!--<div style="height:20px"></div>-->
    </el-dialog>
    <!--二级 明细弹窗-->
    <plate-type-detail
      :edit_flag="detailFlag"
      :edit_main_title="detailMainTitle"
      :edit_select_row="detailRowData"
      ref="plateTypeDetailRef"
      @edit-close="plateTypeDetailClose">
    </plate-type-detail>
  </div>
</template>

<script type="text/javascript">
  import PlateTypeDetail from './plateTypeDetail'
  import * as MonitorMgtAPI from '@/api/monitor'
  const defaultTableHead = [
    // { key: 'rfId', title: '编号', width: '' },
    { key: 'plateLicenseNo', title: '车牌号', width: '120' },
    { key: 'state', title: '车辆状态', width: '' },
    { key: 'riskType', title: '风险/故障类型', width: '160' },
    { key: 'riskItem', title: '风险/故障明细', width: '160' },
    { key: 'reportTime', title: '上报时间', width: '180' },
    { key: 'continuedTime', title: '持续时间', width: '280' },
    { key: 'cycle', title: '持续周期(时)', width: '130' },
    { key: 'vehicleSpeed', title: '平均速度(km/h)', width: '120' },
    { key: 'tboxNo', title: 'Tbox编号', width: '100' },
    { key: 'remark', title: '备注', width: '' }
  ]
  export default {
    name: '',
    components: { PlateTypeDetail },
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        tableHead: defaultTableHead,
        tableData: [],
        saveTableData: [],
        titleData: {},
        tableLoading: false,
        selectRow: [], // table选中数组
        loadingShow: false,
        downloadLoading: false,
        condition: {
          dateTime: '',
          timeType: '',
          fleet: '',
          vin: '',
          state: ''
        },
        plainVal: '',
        detailFlag: false, // 明细显示
        detailRowData: {}, // 传入明细的当前列
        detailMainTitle: '' // 明细标题
      }
    },
    methods: {
      // 弹窗页打开初始
      handleOpenConfig(data) {
        console.log('plateTableDetail-edit_params', this.$props.edit_params, 'edit_select_row', this.$props.edit_select_row)
        this.plainVal = ''
        this.tableData = []
        this.saveTableData = []
        const { dateTime, timeType, searchType } = this.$props.edit_params
        console.log('searchType', searchType)
        // searchType 车牌号plateLicenseNo 或 车队fleet 查询
        if (searchType === 'plateLicenseNo') {
          const { vin } = this.$props.edit_select_row
          this.condition = { dateTime: dateTime, timeType: timeType, fleet: '', vin: vin, state: '' }
        } else {
          const { fleetName } = this.$props.edit_select_row
          this.condition = { dateTime: dateTime, timeType: timeType, fleet: fleetName, vin: '', state: '' }
        }
        this.getList()
      },
      // 导出
      exportExcel() {
        //
      },
      // type 本地过滤
      queryTypeClick(val) {
        const that = this
        console.log('queryTypeClick()-val', val)
        this.plainVal = val
        const toParams = { type: val }
        that.queryListMock(that.saveTableData, toParams, function(res) {
          that.tableData = res.data
        })
      },
      // 查看 详情 面板
      toTypeDetail(title, row) {
        console.log('toTypeDetail()-title', title, row)
        const that = this
        that.detailRowData = row
        that.detailMainTitle = title
        that.detailFlag = true
      },
      // 查看明细 弹窗关闭
      plateTypeDetailClose() {
        this.detailFlag = false
      },
      getList() {
        const that = this
        that.loadingShow = true
        MonitorMgtAPI.queryVehiclesByTab(that.condition).then(res => {
          that.tableData = res.data
          that.saveTableData = res.data
          that.loadingShow = false
        }).catch(err => {
          console.log('error', err)
          that.loadingShow = false
        })
      },
      // 本地过滤查询-非分页
      queryListMock(arr, condition, callback) {
        const type = condition.type
        console.log('mock-queryListMock()-type', type)
        const mockList = arr.filter(item => {
          if (type !== '') {
            if (parseInt(type) === parseInt(item.state)) {
              return true
            } else {
              return false
            }
          }
          return true
        })
        const resData = {
          'code': 0,
          'data': mockList,
          'message': 'success'
        }
        callback(resData)
      },
      // 表格选中改变时
      handleSelectionChange(val) {
        this.selectRow = val
      },
      // 关闭
      handleClose() {
        this.$emit('edit-close', false)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>



